<!DOCTYPE html>
<%@ page pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蒙自公安大数据智能作战平台</title>
    <link rel="icon" href="./images/logo.png" type="image/x-icon">
    <%--<link rel="icon" href="<c:url value="/favicon.ico" />" type="image/x-icon" />--%>
    <link rel="stylesheet" type="text/css" href="./css/back.css">
    <style>
        *,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
        body,div,h1,h2,h3,h4,h5,h6,li,p,section,ul{margin:0;padding:0;}
        body,button,input,select,textarea{color:#2b2e54;font-size:16px;font-family:Verdana,"Microsoft YaHei",Helvetica,sans-serif;}
        li{list-style:none;}
        em,i{font-style:normal;}
        a img{border:none;}
        a{color:#ddd;text-decoration:none;}
        a:hover{color:#e60412;}
        .fl{float:left;}
        .fr{float:right;}
        .di{display:inline-block;}
        .clearfix:after,.clearfix:before{display:table;content:"";}
        .clearfix:after{clear:both;}
        body,html{height:100%;}
        body { border: none; margin: 0; background:url(../assets/images/bg.jpg) no-repeat center center;background-size:cover;  text-align:center; }
        .login-wrap{margin:auto;min-height: 100%;}
        .login-wrap h1{float:left;clear:both;overflow:hidden;margin-top:100px;margin-bottom:50px;width:100%;height:66px;background:url(../assets/images/login-title.png) no-repeat center top;font-size:0;line-height:300px;}
        .login:after{clear:both;display:block;content:"";}
        .login ul{padding:40px;width:600px;border-radius:10px;margin: 20px auto;background-color:rgba(0,0,0,.2);}
        .login li{position:relative;padding:10px 0;}
        .login li:last-child{padding-top:20px;}
        .login li i{position:absolute;top:25px;left:10px;color:rgba(255,255,255,.5);}
        .login-input{padding:12px 10px 12px 40px;width:100%;border:1px solid rgba(255,255,255,.3);border-radius:6px;background-color:transparent;color:#fff;}
        .login-input:hover{border-color:rgba(255,255,255,.6);}
        .login-input:focus{border-color:rgba(255,255,255,.8);}
        .login-btn{padding:10px;min-width:100px;border:none;border-radius:6px;background-color:#f19a1d;color:#fff;}
        .login-btn:hover{padding:10px;border:none;background-color:#faa52a;}
        .login li a{float:right;margin-top:5px;}
        .login-img{float:right;}
        .login-img img{max-width:100%;}
        .footer{position:absolute; font-size:12px;bottom:20px;left:0;width:100%;color:#666;text-align:center;text-shadow: 1px 1px #fff;}
        .footer a{color:#666;text-shadow: 1px 1px #fff;}
        .modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;outline:0;background-color:rgba(0,0,0,.4);-webkit-overflow-scrolling:touch;}
        .modal-loading{width:48px;height:48px;}
        .modal-dialog{margin:80px auto;width:60%;max-width:800px;border:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2);color:#047eb4;}
        .modal-header{padding-left:14px;height:40px;border-bottom:1px solid #ddd;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;background-color:#fff;line-height:40px;}
        .modal-header .close{float:right;margin:5px 5px 0 0;border:0 none;background-color:transparent;color:#8c8c8c;text-shadow:0 1px 0 #fff;font-weight:700;font-size:24px;line-height:1;}
        .modal-header .close:hover i{color:#be0000;}
        .modal-header .modal-title{padding:0;}
        .modal-body{overflow-y:auto;padding:15px;max-height:500px;min-height:60px;}
        .modal-body:after,.modal-body:before{display:table;content:"";}
        .modal-body:after{clear:both;}
        .modal-footer{padding:10px 15px;border-top:1px solid #ddd;text-align:right;}

        .login-logo{margin:0 auto;padding:3% 0 0;width:32%;max-width:815px;}
        .login-logo img{width:100%}
        .rotate{animation: 3s linear 0s normal none infinite running rotate;z-index: 4;}
        .footer-photo.right .rotate{animation: 3s linear 0s normal none infinite running rotate2;}
        .footer-photo{ position:fixed; left:8%;bottom:5%;z-index: 9}
        .footer-photo.right{left:auto;right:12%;bottom:5%;}
        .footer-photo.center{left:auto;right:46%;bottom:10%;}
        .rotate{ position: absolute;top:-20px;left:-20px; z-index: 10}

        .rotate img{width:200px;display: block;}
        .photo img{width:160px;display:block;}
        .photo:hover img{animation: 3s linear 0s normal none infinite running rotate2}
        .flag{position: fixed;left:0;top:0;width:35%;max-width:700px;}
        .ribbon{position: fixed;right:0;bottom:0;width:45%;max-width:1000px;}
        .flag img,.ribbon img{width:100%;display:block;}

        .login{ position:relative; z-index:10}

        @keyframes rotate{

            0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
            50%{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg)}
            100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg)}

        }

        @keyframes rotate2{
            0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
            50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
            100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg)}

        }


        @media only screen and (max-width: 1440px){
            .qcontainer,.back {width: 180px;height:auto;}
            .qcontainer img,.back img {max-width:100%;}
            .film{height:auto;}
            .submenu{padding:10px;}

            .rotate img{width:140px;display: block;}
            .photo img{width:100px;}
        }
        #kaptcha {
            display: inline-block;
            vertical-align:center;
            width: 210px;
        }

        #kaptchapic {
            vertical-align: middle;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <div class="login-logo"><img src="./images/login-logo.png"></div>
    <div class="container">
        <!-- logo -->
        <%--<h3>--%>
        <%--<img src="./images/logo.png" alt="系统登录" />--%>
        <%--</h3>--%>
        <!--<h1>蒙自公安智能作战大数据分析平台</h1>-->
        <form:form method="post" id="fm1" commandName="${commandName}"
                   htmlEscape="true">
            <div style="display: none;">
                <form:errors path="*" id="msg" cssClass="errors" element="div"
                             htmlEscape="false" />

                <h2>
                    <spring:message code="screen.welcome.instructions" />
                </h2>
            </div>

            <section class="row">

                <c:choose>
                    <c:when test="${not empty sessionScope.openIdLocalId}">
                        <strong><c:out value="${sessionScope.openIdLocalId}" /></strong>
                        <input type="hidden" id="username" name="username"
                               value="<c:out value="${sessionScope.openIdLocalId}" />" />
                    </c:when>
                    <c:otherwise>
                        <spring:message code="screen.welcome.label.netid.accesskey"
                                        var="userNameAccessKey" />
                        <form:input cssClass="required" cssErrorClass="error"
                                    id="username" size="20" maxlength="20" tabindex="1"
                                    accesskey="${userNameAccessKey}" path="username"
                                    autocomplete="off" htmlEscape="true" placeholder="用户名" onfocus="this.placeholder=''" onblur="this.placeholder='用户名'"/>
                    </c:otherwise>
                </c:choose>
            </section>

            <section class="row">
                <spring:message code="screen.welcome.label.password.accesskey"
                                var="passwordAccessKey" />
                <form:password cssClass="required" cssErrorClass="error"
                               id="password" size="20" maxlength="20" tabindex="2" path="password"
                               accesskey="${passwordAccessKey}" htmlEscape="true"
                               autocomplete="off" placeholder="密码" onfocus="this.placeholder=''" onblur="this.placeholder='密码'"/>
                <span id="capslock-on" style="display: none;"><p>
							<img src="images/warning.png" valign="top">
							<spring:message code="screen.capslock.on" />
						</p></span>
            </section>

            <section class="row">
                <form:input cssClass="required" cssErrorClass="error" id="kaptcha"
                            size="4" maxlength="4" tabindex="3" accesskey="${kaptchaAccessKey}"
                            path="kaptcha" autocomplete="off" htmlEscape="true"
                            placeholder="验证码" onfocus="this.placeholder=''" onblur="this.placeholder='验证码'"/>
                <img id="kaptchapic" src="kaptcha.jpg" title="看不清?">

            </section>
            <br>
            <section class="row btn-row">
                <input type="hidden" name="lt" value="${loginTicket}" /> <input
                    type="hidden" name="execution" value="${flowExecutionKey}" /> <input
                    type="hidden" name="_eventId" value="submit" />

                <button id="login-button" class="btn-submit" name="submit"
                        accesskey="l"
                        value="<spring:message code="screen.welcome.button.login" />"
                        tabindex="6" type="submit">登录</button>

            </section>
        </form:form>
    </div>

    <%--<ul class="bg-bubbles">--%>
    <%--<li></li>--%>
    <%--<li></li>--%>
    <%--<li></li>--%>
    <%--<li></li>--%>
    <%--<li></li>--%>
    <%--<li></li>--%>
    <%--<li></li>--%>
    <%--<li></li>--%>
    <%--<li></li>--%>
    <%--<li></li>--%>
    <%--</ul>--%>

</div>
<div></div>
<div class="flag">
    <img src="./images/index-flag.png">
</div>
<div class="ribbon">
    <img src="./images/index-ribbon.png">
</div>
<div class="footer-photo">
    <div class="rotate"><img src="./images/index-circle.png"></div>
    <div class="photo"><img src="./images/index-photo1.png"></div>
</div>

<div class="footer-photo center">
    <div class="rotate"><img src="./images/index-circle.png"></div>
    <div class="photo"><img src="./images/index-photo2.png"></div>
</div>

<div class="footer-photo right">
    <div class="rotate"><img src="./images/index-circle.png"></div>
    <div class="photo"><img src="./images/index-photo3.png"></div>
</div>
<div class="footer">
    技术支持：<a href="//www.cetc-cloud.com" target="_blank">中国电子科技网络信息安全有限公司</a>
</div>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script>
    $(function() {
        var showMsg = function() {
            var $msg = $('#msg')
            if ($msg && $msg.text()) {
                if (!$msg.find('br').length) {
                    $('#login-button').text($msg.text()).css('color',
                        '#FF0000')
                }
            }
        }

        $('form').on('focus', 'input', function(event) {
            event.preventDefault()
            $('#login-button').text('登录').css('color', '#fff')
        })

        $('#kaptcha').focus(function(){
            $(this).val('')
        })

        showMsg()

        $('#kaptchapic').click(
            function() {
                $("#kaptchapic").hide().attr('src','kaptcha.jpg?' + Math.floor(Math.random() * 100)).fadeIn();
            });
    })
</script>
</body>
</html>